<template>
  <view class="page">
    <!-- 头部信息 -->
    <view class="head-view">
      <u-avatar :src="avatar" shape="square" size="120"></u-avatar>
      <view class="info-view">
        <view>
          <text class="nickname">{{ nickname }}</text>
        </view>
        <view>
          <text>账号：{{ account }}</text>
        </view>
      </view>
    </view>

    <view class="cell-list">
      <view class="asset-container">
        <u-cell-group class="cell-group">
          <u-cell title="历史资产统计" value="重计算" :isLink="true" arrow-direction="right"
            url="/pages/components/assetStatistics">
            <img src="@/static/assets.png" slot="icon" />
          </u-cell>
        </u-cell-group>
      </view>
      <view>
        <text class="tip-text">财富账号</text>
        <view class="asset-container">
          <u-cell-group class="cell-group">
            <u-cell icon="setting-fill" title="支付账号" :isLink="true" arrow-direction="right" url="/pages/components/payManage" >
              <img src="@/static/pay.png" slot="icon" />
            </u-cell>
            <u-cell icon="setting-fill" title="财富账号" :isLink="true" arrow-direction="right"  url="/pages/components/wealthManage">
              <img src="@/static/wealth.png" slot="icon" />
            </u-cell>
            <u-cell icon="setting-fill" title="消费类型" :isLink="true" arrow-direction="right"  url="/pages/components/consumptionType">
              <img src="@/static/consumptionType.png" slot="icon" />
            </u-cell>
          </u-cell-group>
        </view>
      </view>
      <view>
        <text class="tip-text">账户与安全</text>
        <view class="asset-container">
          <u-cell-group class="cell-group">
            <u-cell icon="setting-fill" title="账户安全" :isLink="true" arrow-direction="right">
              <img src="@/static/accountSecurity.png" slot="icon" />
            </u-cell>
          </u-cell-group>
        </view>
      </view>
      <view class="asset-container">
        <u-cell-group class="cell-group">
          <u-cell icon="setting-fill" title="关于" value="新版本" :isLink="true" arrow-direction="right">
            <img src="@/static/about-we.png" slot="icon" />
          </u-cell>
          <u-cell icon="integral-fill" title="联系我们">
            <img src="@/static/ContactUs.png" slot="icon" />
          </u-cell>
        </u-cell-group>
      </view>
      <view>
        <u-button text="退出登录" @click="showLogout = true"></u-button>
        <u-modal :show="showLogout" :title="'退出提示'" :showCancelButton="true" :content="'请再次确认是否退出系统！'"
          confirmColor="red" confirmText="确认退出" @cancel="showLogout = false" @confirm="logout"></u-modal>
      </view>
    </view>
  </view>
</template>

<script>
import { me } from '@/api/auth'
export default {
  mounted() {
    this.getMe()
  },

  data() {
    return {
      avatar: 'http://liujiji.nat300.top/avatar/avatar.jpg',
      nickname: '',
      account: '',
      showLogout: false
    }
  },
  methods: {
    logout() {
      this.showLogout = false
      // 清空所有本地存储
      uni.clearStorageSync()
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/login/index' })
      }, 500)
    },
    getMe() {
      me().then(res => {
        console.log('111', res);

        this.nickname = res.nickname
        this.account = res.account
      })
    }
  }
}
</script>

<style scoped>
.cell-list {
  margin-top: 30rpx;

  .tip-text {
    margin-left: 15px;
    font-size: 25rpx;
  }
}

.asset-container {
  background-color: white;

  .cell-group {
    margin-bottom: 30rpx;
  }
}

.head-view {
  display: flex;
  background-color: white;
  padding: 20px;

  .info-view {
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .nickname {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }
  }
}
</style>
